<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    :root{
    color: brown;
}/*:root选择器设置样式对页面所有内容都生效*/
strong:not(#one){
    color: aqua;
}/*:not()选择器是可以排除设置标签或属性选择标签，此处表达的是strong标签zhong排除有id名为one，其他的都改变样式，括号中可写类名.xxx或者id名，id名前要加#*/
span:only-child{
    color: blue;
}/*子元素标签名:only-child选择器指标签名为只有一个子元素的父元素中唯一的子元素发生变化,此处是第一个p发生变化*/
/*标签名：first-child选择器表示的是标签名xxx的第一个子元素内容发生改变*/
/*标签名：last-child选择器表示的是标签名xxx的最后一个子元素内容发生改变*/
/*标签名:nth-child(n)选择器表示的是标签名xxxde第n个子元素内容发生改变，此处n可为2n偶数行变2n+1奇数行变*/
/*标签名：nth-last-child（n）选择器表示的是标签名xxx的倒数第n个子元素，此处n与上处相同*/
/*标签名或者空：empty选择器用来选择没有子元素或者内容为空的标签内容改变样式例如颜色*/
/*标签名（加入后优先级改变）或者空：target选择器用来设置用户点击链接后跳转的内容的样式*/
/*标签名:first-of-type选择器用于改变父元素（标签名xxx）中第一个特定类型的子元素内容样式发生改变*/
/*标签名:last-of-type选择器用于改变父元素（标签名xxx）中最后一个个特定类型的子元素内容样式发生改变*/
/*标签名:nth-of-type（n）选择器用于匹配父元素（标签名xxx）中特定类型的第n个子元素内容样式发生改变*/
/*标签名或无：nth-of-type(odd)选择器用于匹配父元素（标签名xxx）中所有奇数行发生内容样式变化*/
/*标签名或无：nth-of-type(even)选择器用于匹配父元素（标签名xxx）中所有偶数行发生内容样式变化*/
/*p:nth-of-type(2) > strong选择器表示的是p标签第二行中第一个strong标签内容发生改变*/
选择器可以结合使用

</style>
<body>
    <p>vsjnvns</p>
    <p>nfvskksv</p>
    <p>书生</p>
    <p><strong id="one">白面</strong> <strong>聊斋</strong>/*两个strong标签此处会默认为是一句话*</p>
    <p>
        <span>家人</span>
    </p>
</body>
</html>